import React, { Component } from 'react';
import { Carousel, Grid } from 'antd-mobile';
import { Route, Link } from "react-router-dom";
import './index-huawei.css';
import huawei from '../../../api/index/huawei';

class HuaWei extends Component {
  render() {
    return (
      <div id='banner'>
        <Banner />
        <Channel />
        <GridExample />
      </div>
    )
  }
}

// 轮播
class Banner extends Component {
  state = {
    data: ['mirNYkPSF7IqwfBTkfjR', '8hxox8HnXrb1sdzE66jJ', 'R6IjCJ2tDokNGWOV6X8I', '57dpmiuwv28mA5nO4Gxl', '44OkMNQYRDXuDX79S2ox', 'W1ZlItX9A5guxBuUAPsb', '02oGhFd8CQOPkrYYbI46', 'Y44xYMDhqEe4kDebbwho'],
    imgHeight: 176,
  }
  render() {
    return (
      <Carousel
        autoplay={true}
        autoplayInterval={"2000"}
        infinite={true}
        slideWidth={'375px'}
      // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
      // afterChange={index => console.log('slide to', index)}
      >
        {this.state.data.map(val => (
          <a
            key={val}
            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
          >
            <img
              src={`https://res.vmallres.com/pimages//sale/2019-03/${val}.jpg`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}
      </Carousel>
    );
  }
};

// 广告
class Channel extends Component {
  render() {
    return (
      <div className='channel'>
        <div className='channel-d'>
          <img src="https://res.vmallres.com/pimages//sale/2019-03/7JAS4Wv2jfJBstIyzt4a.jpg" alt="" />
        </div>
        <div className='channel-d'>
          <img src="https://res.vmallres.com/pimages//sale/2019-03/bjrOCaB0S7UWPPsi3S4R.jpg" alt="" />
        </div>
      </div>
    )
  }
}

class GridExample extends Component {
  constructor() {
    super();
    this.state = {
      huaweiList: []
    };
  }

  componentDidMount() {
    huawei.then(res => {
      this.setState({
        huaweiList: res.data.data
      });
    });
  }

  render() {
    let mobile = this.state.huaweiList;
    let data1 = mobile.map(item => {
      return {
        pimg: `${item.imgUrl[0]}`,
        pname: `${item.smallpname}`,
        promotion: `${item.introduction}`,
        price: `¥ ${item.pprice}`,
        pid: `${item.pid}`,
      }
    })
    return (
      <div>
        <div className="sub-title">
          <div>
            <h2>手机</h2>
          </div>
        </div>
        <Grid data={data1}
          columnNum={3}
          square={false}
          renderItem={dataItem => (
            <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
              <div className='product'>
                <p className='p-img'>
                  <img src={dataItem.pimg} style={{ width: '75px', height: '75px' }} alt="" />
                </p>
                <div style={{ color: '#888', fontSize: '14px', marginTop: '12px' }}>
                  <p className='p-name'>{dataItem.pname}</p>
                  <p className='p-promotion'>{dataItem.promotion}</p>
                  <p className='p-price'>{dataItem.price}</p>
                </div>
              </div>
            </Link>
          )}
        />
      </div >
    )
  }
}

export default HuaWei;